<template>


  <div id="container">
    <div style="position: fixed;z-index: 99;">
      <input id="a" placeholder="请输入起点" v-model="a"/>
      <input id="b" placeholder="请输入终点" v-model="b"/>
      <button @click="search(avalue,bvalue)">开始选路</button>
      <button @click="useSuggest(road,cities,avalue,bvalue)">确认使用该路线</button>
    </div>
    <div id="panel"></div>
  </div>


</template>

<script>



import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name:'amap',
  data(){
    return{
      map:null,
      a:'',
      b:'',
      driving:null,
      avalue:[],
      bvalue:[],
      road:'',
      cities:[],
    }
  },
  methods:{
    useSuggest(road,city,avalue,bvalue){

      this.$emit("send",road,city,avalue,bvalue)

    },
    initMap(){
      AMapLoader.load({
        key:"50772f4c46250195fcc287fd76e4af6c",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins:['AMap.Driving','AMap.Autocomplete','AMap.PlaceSearch'],

      }).then((AMap)=>{
        //初始化地图
        this.map = new AMap.Map("container",{  //设置地图容器id
          viewMode:"2D",    //是否为3D地图模式
          zoom:5,           //初始化地图级别
          center:[112.938882,28.228304], //初始化地图中心点位置:长沙
          mapStyle: 'amap://styles/cd16c798718efaea92c34799633b495f',

        });
        let that =this ;
        AMap.plugin(['AMap.Driving','AMap.AutoComplete','AMap.PlaceSearch'],()=>{//异步同时加载多个插件
          //初始化地点查询
          var placeSearch1 = new AMap.PlaceSearch({
            map:that.map
          });
          //输入提示
          var auto1 = new AMap.AutoComplete({

            input: "a"
          });
          var auto2 = new AMap.AutoComplete({

            input: "b"
          });
          auto1.on('select',function (e){
            that.a=e.poi.name
            placeSearch1.setCity(e.poi.adcode);
            placeSearch1.search(e.poi.name,function (status, result){
              that.avalue=[result.poiList.pois[0].location.lng,result.poiList.pois[0].location.lat]
            });  //关键字查询查询
          })

          auto2.on('select',function (e){
            that.b=e.poi.name
            placeSearch1.setCity(e.poi.adcode);
            placeSearch1.search(e.poi.name,function (status, result){
              that.bvalue=[result.poiList.pois[0].location.lng,result.poiList.pois[0].location.lat]
            });  //关键字查询查询
          })

          //初始化路线推荐
          that.driving = new AMap.Driving({
            policy: AMap.DrivingPolicy.LEAST_TIME, // 路线选择策略
            ferry: 1, // 是否可以使用轮渡
            province: '湘', // 车牌省份的汉字缩写
            map: this.map,
            panel: 'panel'
          })

        });



      }).catch(e=>{
        console.log(e);
      })
    },
    // 开始导航
    search(start,end){



      // 根据起终点经纬度规划驾车导航路线
      // 株洲西收费站-岳阳收费站
      // 在这里改变输入的起点和终点
      let that=this
      this.driving.search(start, end, function(status, result) {
        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult

        if (status === 'complete') {
          console.log('绘制驾车路线完成')
          console.log(result)
          var rlist = result.routes;
          console.log(rlist);
          console.log("花费时间："+rlist[0].time)
          console.log("路线长度："+rlist[0].tolls_distance)
          console.log("路费："+rlist[0].tolls);
          console.log("路线策略："+rlist[0].policy);
          var num = rlist[0].steps.length;
          var proad = "";
          var finalroad = "";
          finalroad+=that.a
          finalroad+='---'
          console.log("一共有"+num+"个steps");
          for (let i = 1; i < num-1; i++) {
            let step = rlist[0].steps[i];
            let road = step.road;
            let city=step.cities
            for(let j=0;j<city.length;j++){
              let flag=1
              for(let f=0;f<that.cities.length;f++){
                if(that.cities[f]===city[j].name){
                  flag=0
                }
              }
              if(flag===1){
                that.cities.push(city[j].name)
              }
            }
            if(road===proad||road===''){
              continue;
            }


            proad = road;
            finalroad +=  road;

            finalroad += "---";

          }
          finalroad+=that.b
          console.log("文字推荐路线为："+finalroad);
          alert("文字推荐路线为："+finalroad);
          that.road=finalroad


        } else {
          console.log('获取驾车数据失败：' + result)
        }
      });

    }



// 实现自定义窗体内容，返回拼接后的字符串



  },
  mounted(){
    //DOM初始化完成进行地图初始化
    this.initMap();

  }
}







</script>

<style scoped>

#container{
  position: absolute;
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}
#panel {

  position: absolute;
  background-color: white;
  max-height: 60%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 250px;
  z-index: 99;
}
#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>